<template>
    <div class="memberCenter">
        <div class="container">
            <div class="row">
                <div class="leftNav col-lg-3 col-md-3 col-xs-12">
                    <div class="navHead">
                        <div class="memberIcon">
                            <img v-if="!member.icon" :src="staticIcon" class="img-responsive">
                            <img v-if="member.icon" :src="member.icon" class="img-responsive">
                            <div class="mask">
                                <span @click="changeIcon">更换头像</span>
                            </div>
                        </div>
                        <div class="memberName">
                            <span>{{member.nickName}}</span>
                        </div>
                        <div class="memberId">
                            <span>{{member.motto}}</span>
                        </div>
                        <div class="bindIcon">
                            <span class="bindIconItem glyphicon glyphicon-phone"></span>
                            <span class="bindIconItem glyphicon glyphicon-envelope"></span>
                            <span class="bindIconItem glyphicon glyphicon-qrcode"></span>
                            <span class="bindIconItem glyphicon glyphicon-user"></span>
                            <span class="bindIconItem glyphicon glyphicon-credit-card"></span>
                        </div>
                    </div>
                    <div class="navBody">
                        <div class="bodyTitle">
                            <span>账号管理</span>
                        </div>
                        <el-divider class="titleLine" content-position="left"></el-divider>
                        <div class="bodyList">
                            <ul class="nav nav-tabs" role="tablist">
                                <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab"
                                                                          data-toggle="tab">账号绑定</a></li>
                                <li role="presentation"><a href="#profile" aria-controls="profile" role="tab"
                                                           data-toggle="tab">个人信息</a></li>
                                <li role="presentation"><a href="#messages" aria-controls="messages" role="tab"
                                                           data-toggle="tab" @click="getMessage">消息中心</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="rightBody col-lg-9 col-md-9 col-xs-12">
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="home">
                            <div class="bindTitle">
                                <span class="title">账号绑定</span>
                                <span class="titleSpan">完成</span>
                                <span class="titleCount">{{this.bindCount}}/{{this.bindTotal}}</span>
                            </div>
                            <el-divider class="cardLine" content-position="left"></el-divider>
                            <!--<div class="bindStep">
                                <el-steps :active="active" finish-status="success">
                                    <el-step title="手机号"></el-step>
                                    <el-step title="微信号"></el-step>
                                    <el-step title="邮箱"></el-step>
                                    <el-step title="实名认证"></el-step>
                                    <el-step title="支付认证"></el-step>
                                </el-steps>
                            </div>-->

                            <div class="bindCardBody">
                                <el-card class="box-card">
                                    <div slot="header" class="clearfix">
                                        <span class="cardItem glyphicon glyphicon-phone"></span>
                                        <span class="cardTitle">手机号</span>
                                        <!--<el-button style="float: right" round @click="openWechatUpload">换绑手机号
                                        </el-button>-->
                                    </div>
                                    <div class="itemBody">
                                        <span class="bodyBind">已绑定手机号:</span>
                                        <span class="bodyContent">{{this.memberAccount.mobile || ""}}</span>
                                        <div>
                                            <span class="bodyDesc">可用手机号加密码登录亚盟电商平台官网，可通过手机号找回密码</span>
                                            <span v-if="this.memberAccount.mobile" class="bodyStatus">已绑定</span>
                                            <span v-if="!this.memberAccount.mobile" class="bodyStatus">未绑定，请登录</span>
                                        </div>

                                    </div>
                                </el-card>
                                <el-card class="box-card">
                                    <div slot="header" class="clearfix">
                                        <span class="cardItem glyphicon glyphicon-qrcode"></span>
                                        <span class="cardTitle">微信号</span>
                                        <el-button style="float: right" round @click="openWechatUpload">上传微信二维码
                                        </el-button>
                                    </div>
                                    <div class="itemBody">
                                        <div>
                                            <span class="bodyDesc">绑定第三方微信账号，如有后台问题，客服可直接联系到您！</span>
                                            <span v-if="this.memberAccount.wechatCode" class="bodyStatus">已绑定</span>
                                            <span v-if="!this.memberAccount.wechatCode"
                                                  class="bodyStatus">未绑定，请上传加强安全防护</span>
                                        </div>

                                    </div>
                                </el-card>
                                <el-card class="box-card">
                                    <div slot="header" class="clearfix">
                                        <span class="cardItem glyphicon glyphicon-envelope"></span>
                                        <span class="cardTitle">邮箱</span>
                                        <el-button style="float: right" round @click="openWechatUpload">绑定邮箱</el-button>
                                    </div>
                                    <div class="itemBody">
                                        <span class="bodyBind">已绑定邮箱:</span>
                                        <span class="bodyContent">{{this.memberAccount.email || ""}}</span>
                                        <div>
                                            <span class="bodyDesc">绑定邮箱便于接收平台推送消息，后台可直接推送给您最新产品及宣传资料</span>
                                            <span v-if="this.memberAccount.email" class="bodyStatus">已绑定</span>
                                            <span v-if="!this.memberAccount.email"
                                                  class="bodyStatus">未绑定，请绑定邮箱加强安全防护</span>
                                        </div>

                                    </div>
                                </el-card>
                                <el-card class="box-card">
                                    <div slot="header" class="clearfix">
                                        <span class="cardItem glyphicon glyphicon-user"></span>
                                        <span class="cardTitle">实名认证</span>
                                        <el-button style="float: right" round @click="openWechatUpload">绑定实名认证
                                        </el-button>
                                    </div>
                                    <div class="itemBody">
                                        <span class="bodyBind">已通过实名认证:</span>
                                        <span v-if="!this.memberAccount.name" class="bodyName">未实名认证通过</span>
                                        <span v-if="this.memberAccount.name" class="bodyRealName">{{this.memberAccount.name}}</span>
                                        <span class="bodyContent">身份证号：{{this.memberAccount.identityNum ||""}}</span>
                                        <span v-if="this.memberAccount.identityCard" class="bodyStatus">已绑定</span>
                                        <span v-if="this.memberAccount.identityCard.length<1" class="bodyStatus">未绑定，请绑定邮箱加强安全防护</span>
                                        <div>
                                            <span class="bodyNotice">认证须知</span>
                                            <span class="bodyNoticeContent">
                                                <p>1、实名认证可以提升您在亚盟电商平台的个人信息及虚拟财产的安全等级，同时也能够更好的体验亚盟的各项服务；</p>
                                                <p>2、实名认证通过后，将无法修改和删除，请谨慎填写；</p>
                                                <p>3、我们会确保你所提供的信息均处于严格的保密状态，不会泄露；</p>
                                                <p>4、上传身份证需通过后台审核，未通过审核的会员会依旧显示上传身份证，如存在恶意乱填写姓名，身份证号码，及上传与身份证证件无关图片者，一经发现将冻结亚盟电商平台账号。</p>
                                            </span>
                                        </div>

                                    </div>
                                </el-card>
                            </div>

                        </div>
                        <div role="tabpanel" class="tab-pane" id="profile">
                            <div class="bindCardBody">
                                <el-card class="box-card">
                                    <div slot="header" class="clearfix">
                                        <span class="cardInfoItem glyphicon glyphicon-user"></span>
                                        <span class="cardTitle">个人信息</span>
                                        <el-button style="float: right" round @click="openMemberInfo(baseInfo)">编辑个人信息
                                        </el-button>
                                    </div>
                                    <div class="itemBody">
                                        <div class="memberInfo">
                                            <div class="infoName">昵称</div>
                                            <div class="infoValue">{{baseInfo.nickName}}</div>
                                        </div>
                                        <div class="memberInfo">
                                            <div class="infoName">姓名</div>
                                            <div v-if="baseInfo.name" class="infoValue">{{baseInfo.name}}</div>
                                            <div v-if="!baseInfo.name" class="infoValue">未填写</div>
                                        </div>
                                        <div class="memberInfo">
                                            <div class="infoName">所在城市</div>
                                            <div v-if="baseInfo.province" class="infoValue">{{baseInfo.province.add}} -
                                                {{baseInfo.city.add}} - {{baseInfo.district.add}}
                                            </div>
                                            <div v-if="!baseInfo.province" class="infoValue">请选择居住城市</div>
                                        </div>
                                        <div class="memberInfo">
                                            <div class="infoName">个性签名</div>
                                            <div v-if="baseInfo.motto" class="infoValueMotto">{{baseInfo.motto}}</div>
                                            <div v-if="!baseInfo.motto" class="infoValue">未填写</div>
                                        </div>
                                        <div class="memberInfoBottomLine"></div>
                                    </div>
                                </el-card>

                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="messages">
                            <div class="bindCardBody">
                                <el-card class="box-card">
                                    <div slot="header" class="clearfix">
                                        <span class="cardMessageItem el-icon-chat-line-square"></span>
                                        <span class="cardTitle">留言信息</span>
                                    </div>
                                    <div class="itemBody">
                                        <div id="newsComment" class="container newsComment">
                                            <ul id="news_comment_ul" class="news_comment_ul "
                                                v-for="(item,index) in guestBooks" :key="index">
                                                <li class="comment_content clearfix">
                                                    <div class="content_left col-md-1">
                                                        <!--../../../public/base/imgs/news/icon2.jpg-->
                                                        <a href="javascript:;"><img class="member_icon"
                                                                                    :src="item.memberIcon || null"/></a>
                                                    </div>

                                                    <div class="row content_list col-md-8">
                                                        <div class="main">
                                                            <a class="close" href="javascript:;"
                                                               @click="delComment(item)">x</a>
                                                            <p class="main_text">
                                                                <a class="member_name">{{item.memberName}}</a>：
                                                                {{item.content}}
                                                            </p>
                                                        </div>
                                                        <div class="info clearfix">
                                                            <span class="ce_icon ce_icon_E906"></span>
                                                            <span class="info_time">{{item.createTime}}</span>
                                                        </div>
                                                        <div class="comment_line"></div>
                                                        <ul class="comment_list_sub" :change="getChangeData(item)">

                                                            <!--判断登录用户，如果=，这里的member=self，否则=other-->
                                                            <li v-if="item.replyContent" class="comment_box clearfix">
                                                                <img class="member_icon_sub"
                                                                     :src="item.employeeIcon">
                                                                <div class="comment_box_content">
                                                                    <p class="content_text">
                                                                        <!--判断登录用户，如果=，则显示我，否则显示其他用户名-->
                                                                        <span class="member">{{item.employeeName}}：</span>
                                                                        {{item.replyContent}}
                                                                    </p>
                                                                    <p class="content_time">
                                                                        <span class="ce_icon ce_icon_E906"></span>
                                                                        {{item.updateTime}}

                                                                        <el-button v-if="item.replyContent"
                                                                                   class="submitBTN replay_btn"
                                                                                   type="primary"
                                                                                   @click="commentSubmit(item)">回
                                                                            复
                                                                        </el-button>
                                                                    </p>
                                                                </div>
                                                                <div class="comment_dot"></div>
                                                            </li>

                                                            <ul class="replyUL" v-if="item.children.length>0">
                                                                <li class="replyLis comment_box clearfix">
                                                                    <img class="member_icon_sub"
                                                                         :src="item.children[0].memberIcon || null">
                                                                    <div class="comment_box_content">
                                                                        <p class="content_text">
                                                                            <!--判断登录用户，如果=，则显示我，否则显示其他用户名-->
                                                                            <span class="member">{{item.children[0].memberName}}：</span>
                                                                            {{item.children[0].content}}
                                                                        </p>
                                                                        <p class="content_time">
                                                                            <span class="ce_icon ce_icon_E906"></span>
                                                                            {{item.children[0].updateTime}}
                                                                        </p>
                                                                    </div>
                                                                </li>
                                                                <li v-if="item.children[0].replyContent"
                                                                    class="replyLis comment_box clearfix">
                                                                    <img class="member_icon_sub"
                                                                         :src="item.children[0].employeeIcon">
                                                                    <div class="comment_box_content">
                                                                        <p class="content_text">
                                                                            <!--判断登录用户，如果=，则显示我，否则显示其他用户名-->
                                                                            <span class="member">{{item.children[0].employeeName}}：</span>
                                                                            {{item.children[0].replyContent}}
                                                                        </p>
                                                                        <p class="content_time">
                                                                            <span class="ce_icon ce_icon_E906"></span>
                                                                            {{item.children[0].updateTime}}
                                                                            <!--判断登录用户，如果=，则显示“删除”，否则显示：回复-->
                                                                            <a href="javascript:;" class="content_del"
                                                                               @click="delCommentSub(item.children[0])">删除</a>
                                                                            <!--判断登录用户，如果=，则显示“删除”，否则显示：回复-->
                                                                            <el-button
                                                                                    v-if="item.children[0].replyContent"
                                                                                    class="submitBTN replay_btn"
                                                                                    type="primary"
                                                                                    @click="commentSubmit(item.children[0])">
                                                                                回
                                                                                复
                                                                            </el-button>
                                                                        </p>
                                                                    </div>
                                                                </li>
                                                                <div class="comment_dot"></div>
                                                                <ul class="replyUL"
                                                                    v-if="item.children[0].children.length>0">
                                                                    <li class="replyLis comment_box clearfix">
                                                                        <img class="member_icon_sub"
                                                                             :src="item.children[0].children[0].memberIcon || null">
                                                                        <div class="comment_box_content">
                                                                            <p class="content_text">
                                                                                <!--判断登录用户，如果=，则显示我，否则显示其他用户名-->
                                                                                <span class="member">{{item.children[0].children[0].memberName}}：</span>
                                                                                {{item.children[0].children[0].content}}
                                                                            </p>
                                                                            <p class="content_time">
                                                                                <span class="ce_icon ce_icon_E906"></span>
                                                                                {{item.children[0].children[0].updateTime}}
                                                                            </p>
                                                                        </div>
                                                                    </li>
                                                                    <li v-if="item.children[0].children[0].replyContent"
                                                                        class="replyLis comment_box clearfix">
                                                                        <img class="member_icon_sub"
                                                                             :src="item.children[0].children[0].employeeIcon">
                                                                        <div class="comment_box_content">
                                                                            <p class="content_text">
                                                                                <!--判断登录用户，如果=，则显示我，否则显示其他用户名-->
                                                                                <span class="member">{{item.children[0].children[0].employeeName}}：</span>
                                                                                {{item.children[0].children[0].replyContent}}
                                                                            </p>
                                                                            <p class="content_time">
                                                                                <span class="ce_icon ce_icon_E906"></span>
                                                                                {{item.children[0].children[0].updateTime}}
                                                                                <!--判断登录用户，如果=，则显示“删除”，否则显示：回复-->
                                                                                <a href="javascript:;"
                                                                                   class="content_del"
                                                                                   @click="delCommentSub(item.children[0].children[0])">删除</a>
                                                                                <el-button
                                                                                        v-if="item.children[0].children[0].replyContent"
                                                                                        class="submitBTN replay_btn"
                                                                                        type="primary"
                                                                                        @click="commentSubmit(item.children[0].children[0])">
                                                                                    回
                                                                                    复
                                                                                </el-button>
                                                                            </p>
                                                                        </div>
                                                                    </li>

                                                                    <div class="comment_dot"></div>
                                                                    <ul class="replyUL"
                                                                        v-if="item.children[0].children[0].children.length>0">
                                                                        <li class="replyLis comment_box clearfix">
                                                                            <img class="member_icon_sub"
                                                                                 :src="item.children[0].children[0].children[0].memberIcon || null">
                                                                            <div class="comment_box_content">
                                                                                <p class="content_text">
                                                                                    <!--判断登录用户，如果=，则显示我，否则显示其他用户名-->
                                                                                    <span class="member">{{item.children[0].children[0].children[0].memberName}}：</span>
                                                                                    {{item.children[0].children[0].children[0].content}}
                                                                                </p>
                                                                                <p class="content_time">
                                                                                    <span class="ce_icon ce_icon_E906"></span>
                                                                                    {{item.children[0].children[0].children[0].updateTime}}
                                                                                </p>
                                                                            </div>
                                                                        </li>
                                                                        <li v-if="item.children[0].children[0].children[0].replyContent"
                                                                            class="replyLis comment_box clearfix">
                                                                            <img class="member_icon_sub"
                                                                                 :src="item.children[0].children[0].children[0].employeeIcon">
                                                                            <div class="comment_box_content">
                                                                                <p class="content_text">
                                                                                    <!--判断登录用户，如果=，则显示我，否则显示其他用户名-->
                                                                                    <span class="member">{{item.children[0].children[0].children[0].employeeName}}：</span>
                                                                                    {{item.children[0].children[0].children[0].replyContent}}
                                                                                </p>
                                                                                <p class="content_time">
                                                                                    <span class="ce_icon ce_icon_E906"></span>
                                                                                    {{item.children[0].children[0].children[0].updateTime}}
                                                                                    <!--判断登录用户，如果=，则显示“删除”，否则显示：回复-->
                                                                                    <a href="javascript:;"
                                                                                       class="content_del"
                                                                                       @click="delCommentSub(item.children[0].children[0].children[0])">删除</a>
                                                                                    <el-button
                                                                                            v-if="item.children[0].children[0].children[0].replyContent"
                                                                                            class="submitBTN replay_btn"
                                                                                            type="primary"
                                                                                            @click="commentSubmit(item.children[0].children[0].children[0])">
                                                                                        回
                                                                                        复
                                                                                    </el-button>
                                                                                </p>
                                                                            </div>
                                                                        </li>

                                                                        <div class="comment_dot"></div>
                                                                        <ul class="replyUL"
                                                                            v-if="item.children[0].children[0].children[0].children.length>0">
                                                                            <li class="replyLis comment_box clearfix">
                                                                                <img class="member_icon_sub"
                                                                                     :src="item.children[0].children[0].children[0].children[0].memberIcon || null">
                                                                                <div class="comment_box_content">
                                                                                    <p class="content_text">
                                                                                        <!--判断登录用户，如果=，则显示我，否则显示其他用户名-->
                                                                                        <span class="member">{{item.children[0].children[0].children[0].children[0].memberName}}：</span>
                                                                                        {{item.children[0].children[0].children[0].children[0].content}}
                                                                                    </p>
                                                                                    <p class="content_time">
                                                                                        <span class="ce_icon ce_icon_E906"></span>
                                                                                        {{item.children[0].children[0].children[0].children[0].updateTime}}
                                                                                    </p>
                                                                                </div>
                                                                            </li>
                                                                            <li v-if="item.children[0].children[0].children[0].children[0].replyContent"
                                                                                class="replyLis comment_box clearfix">
                                                                                <img class="member_icon_sub"
                                                                                     :src="item.children[0].children[0].children[0].children[0].employeeIcon">
                                                                                <div class="comment_box_content">
                                                                                    <p class="content_text">
                                                                                        <!--判断登录用户，如果=，则显示我，否则显示其他用户名-->
                                                                                        <span class="member">{{item.children[0].children[0].children[0].children[0].employeeName}}：</span>
                                                                                        {{item.children[0].children[0].children[0].children[0].replyContent}}
                                                                                    </p>
                                                                                    <p class="content_time">
                                                                                        <span class="ce_icon ce_icon_E906"></span>
                                                                                        {{item.children[0].children[0].children[0].children[0].updateTime}}
                                                                                        <!--判断登录用户，如果=，则显示“删除”，否则显示：回复-->
                                                                                        <a href="javascript:;"
                                                                                           class="content_del"
                                                                                           @click="delCommentSub(item.children[0].children[0].children[0].children[0])">删除</a>
                                                                                        <el-button
                                                                                                v-if="item.children[0].children[0].children[0].children[0].replyContent"
                                                                                                class="submitBTN replay_btn"
                                                                                                type="primary"
                                                                                                @click="commentSubmit(item.children[0].children[0].children[0].children[0])">
                                                                                            回
                                                                                            复
                                                                                        </el-button>
                                                                                    </p>
                                                                                </div>
                                                                            </li>

                                                                            <div class="comment_dot"></div>
                                                                            <ul class="replyUL"
                                                                                v-if="item.children[0].children[0].children[0].children[0].children.length>0">
                                                                                <li class="replyLis comment_box clearfix">
                                                                                    <img class="member_icon_sub"
                                                                                         :src="item.children[0].children[0].children[0].children[0].children[0].memberIcon || null">
                                                                                    <div class="comment_box_content">
                                                                                        <p class="content_text">
                                                                                            <!--判断登录用户，如果=，则显示我，否则显示其他用户名-->
                                                                                            <span class="member">{{item.children[0].children[0].children[0].children[0].children[0].memberName}}：</span>
                                                                                            {{item.children[0].children[0].children[0].children[0].children[0].content}}
                                                                                        </p>
                                                                                        <p class="content_time">
                                                                                            <span class="ce_icon ce_icon_E906"></span>
                                                                                            {{item.children[0].children[0].children[0].children[0].children[0].updateTime}}
                                                                                        </p>
                                                                                    </div>
                                                                                </li>
                                                                                <li v-if="item.children[0].children[0].children[0].children[0].children[0].replyContent"
                                                                                    class="replyLis comment_box clearfix">
                                                                                    <img class="member_icon_sub"
                                                                                         :src="item.children[0].children[0].children[0].children[0].children[0].employeeIcon">
                                                                                    <div class="comment_box_content">
                                                                                        <p class="content_text">
                                                                                            <!--判断登录用户，如果=，则显示我，否则显示其他用户名-->
                                                                                            <span class="member">{{item.children[0].children[0].children[0].children[0].children[0].employeeName}}：</span>
                                                                                            {{item.children[0].children[0].children[0].children[0].children[0].replyContent}}
                                                                                        </p>
                                                                                        <p class="content_time">
                                                                                            <span class="ce_icon ce_icon_E906"></span>
                                                                                            {{item.children[0].children[0].children[0].children[0].children[0].updateTime}}
                                                                                            <!--判断登录用户，如果=，则显示“删除”，否则显示：回复-->
                                                                                            <a href="javascript:;"
                                                                                               class="content_del"
                                                                                               @click="delCommentSub(item.children[0].children[0].children[0].children[0].children[0])">删除</a>
                                                                                            <el-button
                                                                                                    v-if="item.children[0].children[0].children[0].children[0].children[0].replyContent"
                                                                                                    class="submitBTN replay_btn"
                                                                                                    type="primary"
                                                                                                    @click="commentSubmit(item.children[0].children[0].children[0].children[0].children[0])">
                                                                                                回
                                                                                                复
                                                                                            </el-button>
                                                                                        </p>
                                                                                    </div>
                                                                                </li>

                                                                                <div class="comment_dot"></div>
                                                                                <ul class="replyUL"
                                                                                    v-if="item.children[0].children[0].children[0].children[0].children[0].children.length>0">
                                                                                    <li class="replyLis comment_box clearfix">
                                                                                        <img class="member_icon_sub"
                                                                                             :src="item.children[0].children[0].children[0].children[0].children[0].children[0].memberIcon || null">
                                                                                        <div class="comment_box_content">
                                                                                            <p class="content_text">
                                                                                                <!--判断登录用户，如果=，则显示我，否则显示其他用户名-->
                                                                                                <span class="member">{{item.children[0].children[0].children[0].children[0].children[0].children[0].memberName}}：</span>
                                                                                                {{item.children[0].children[0].children[0].children[0].children[0].children[0].content}}
                                                                                            </p>
                                                                                            <p class="content_time">
                                                                                                <span class="ce_icon ce_icon_E906"></span>
                                                                                                {{item.children[0].children[0].children[0].children[0].children[0].children[0].updateTime}}
                                                                                            </p>
                                                                                        </div>
                                                                                    </li>
                                                                                    <li v-if="item.children[0].children[0].children[0].children[0].children[0].children[0].replyContent"
                                                                                        class="replyLis comment_box clearfix">
                                                                                        <img class="member_icon_sub"
                                                                                             :src="item.children[0].children[0].children[0].children[0].children[0].children[0].employeeIcon">
                                                                                        <div class="comment_box_content">
                                                                                            <p class="content_text">
                                                                                                <!--判断登录用户，如果=，则显示我，否则显示其他用户名-->
                                                                                                <span class="member">{{item.children[0].children[0].children[0].children[0].children[0].children[0].employeeName}}：</span>
                                                                                                {{item.children[0].children[0].children[0].children[0].children[0].children[0].replyContent}}
                                                                                            </p>
                                                                                            <p class="content_time">
                                                                                                <span class="ce_icon ce_icon_E906"></span>
                                                                                                {{item.children[0].children[0].children[0].children[0].children[0].children[0].updateTime}}
                                                                                                <!--判断登录用户，如果=，则显示“删除”，否则显示：回复-->
                                                                                                <a href="javascript:;"
                                                                                                   class="content_del"
                                                                                                   @click="delCommentSub(item.children[0].children[0].children[0].children[0].children[0].children[0])">删除</a>
                                                                                                <el-button
                                                                                                        v-if="item.children[0].children[0].children[0].children[0].children[0].children[0].replyContent"
                                                                                                        class="submitBTN replay_btn"
                                                                                                        type="primary"
                                                                                                        @click="commentSubmit(item.children[0].children[0].children[0].children[0].children[0].children[0])">
                                                                                                    回
                                                                                                    复
                                                                                                </el-button>
                                                                                            </p>
                                                                                        </div>
                                                                                    </li>

                                                                                    <div class="comment_dot"></div>
                                                                                    <ul class="replyUL"
                                                                                        v-if="item.children[0].children[0].children[0].children[0].children[0].children[0].children.length>0">
                                                                                        <li class="replyLis comment_box clearfix">
                                                                                            <img class="member_icon_sub"
                                                                                                 :src="item.children[0].children[0].children[0].children[0].children[0].children[0].children[0].memberIcon || null">
                                                                                            <div class="comment_box_content">
                                                                                                <p class="content_text">
                                                                                                    <!--判断登录用户，如果=，则显示我，否则显示其他用户名-->
                                                                                                    <span class="member">{{item.children[0].children[0].children[0].children[0].children[0].children[0].children[0].memberName}}：</span>
                                                                                                    {{item.children[0].children[0].children[0].children[0].children[0].children[0].children[0].content}}
                                                                                                </p>
                                                                                                <p class="content_time">
                                                                                                    <span class="ce_icon ce_icon_E906"></span>
                                                                                                    {{item.children[0].children[0].children[0].children[0].children[0].children[0].children[0].updateTime}}
                                                                                                </p>
                                                                                            </div>
                                                                                        </li>
                                                                                        <li v-if="item.children[0].children[0].children[0].children[0].children[0].children[0].children[0].replyContent"
                                                                                            class="replyLis comment_box clearfix">
                                                                                            <img class="member_icon_sub"
                                                                                                 :src="item.children[0].children[0].children[0].children[0].children[0].children[0].children[0].employeeIcon">
                                                                                            <div class="comment_box_content">
                                                                                                <p class="content_text">
                                                                                                    <!--判断登录用户，如果=，则显示我，否则显示其他用户名-->
                                                                                                    <span class="member">{{item.children[0].children[0].children[0].children[0].children[0].children[0].children[0].employeeName}}：</span>
                                                                                                    {{item.children[0].children[0].children[0].children[0].children[0].children[0].children[0].replyContent}}
                                                                                                </p>
                                                                                                <p class="content_time">
                                                                                                    <span class="ce_icon ce_icon_E906"></span>
                                                                                                    {{item.children[0].children[0].children[0].children[0].children[0].children[0].children[0].updateTime}}
                                                                                                    <!--判断登录用户，如果=，则显示“删除”，否则显示：回复-->
                                                                                                    <a href="javascript:;"
                                                                                                       class="content_del"
                                                                                                       @click="delCommentSub(item.children[0].children[0].children[0].children[0].children[0].children[0].children[0])">删除</a>
                                                                                                    <el-button
                                                                                                            v-if="item.children[0].children[0].children[0].children[0].children[0].children[0].children[0].replyContent"
                                                                                                            class="submitBTN replay_btn"
                                                                                                            type="primary"
                                                                                                            @click="commentSubmit(item.children[0].children[0].children[0].children[0].children[0].children[0].children[0])">
                                                                                                        回
                                                                                                        复
                                                                                                    </el-button>
                                                                                                </p>
                                                                                            </div>
                                                                                        </li>

                                                                                        <div class="comment_dot"></div>
                                                                                        <ul class="replyUL"
                                                                                            v-if="item.children[0].children[0].children[0].children[0].children[0].children[0].children[0].children.length>0">
                                                                                            <li class="replyLis comment_box clearfix">
                                                                                                <img class="member_icon_sub"
                                                                                                     :src="item.children[0].children[0].children[0].children[0].children[0].children[0].children[0].children[0].memberIcon || null">
                                                                                                <div class="comment_box_content">
                                                                                                    <p class="content_text">
                                                                                                        <!--判断登录用户，如果=，则显示我，否则显示其他用户名-->
                                                                                                        <span class="member">{{item.children[0].children[0].children[0].children[0].children[0].children[0].children[0].children[0].memberName}}：</span>
                                                                                                        {{item.children[0].children[0].children[0].children[0].children[0].children[0].children[0].children[0].content}}
                                                                                                    </p>
                                                                                                    <p class="content_time">
                                                                                                        <span class="ce_icon ce_icon_E906"></span>
                                                                                                        {{item.children[0].children[0].children[0].children[0].children[0].children[0].children[0].children[0].updateTime}}
                                                                                                    </p>
                                                                                                </div>
                                                                                            </li>
                                                                                            <li v-if="item.children[0].children[0].children[0].children[0].children[0].children[0].children[0].children[0].replyContent"
                                                                                                class="replyLis comment_box clearfix">
                                                                                                <img class="member_icon_sub"
                                                                                                     :src="item.children[0].children[0].children[0].children[0].children[0].children[0].children[0].children[0].employeeIcon">
                                                                                                <div class="comment_box_content">
                                                                                                    <p class="content_text">
                                                                                                        <!--判断登录用户，如果=，则显示我，否则显示其他用户名-->
                                                                                                        <span class="member">{{item.children[0].children[0].children[0].children[0].children[0].children[0].children[0].children[0].employeeName}}：</span>
                                                                                                        {{item.children[0].children[0].children[0].children[0].children[0].children[0].children[0].children[0].replyContent}}
                                                                                                    </p>
                                                                                                    <p class="content_time">
                                                                                                        <span class="ce_icon ce_icon_E906"></span>
                                                                                                        {{item.children[0].children[0].children[0].children[0].children[0].children[0].children[0].children[0].updateTime}}
                                                                                                        <!--判断登录用户，如果=，则显示“删除”，否则显示：回复-->
                                                                                                        <a href="javascript:;"
                                                                                                           class="content_del"
                                                                                                           @click="delCommentSub(item.children[0].children[0].children[0].children[0].children[0].children[0].children[0].children[0])">删除</a>
                                                                                                        <el-button
                                                                                                                v-if="item.children[0].children[0].children[0].children[0].children[0].children[0].children[0].children[0].replyContent"
                                                                                                                class="submitBTN replay_btn"
                                                                                                                type="primary"
                                                                                                                @click="commentSubmit(item.children[0].children[0].children[0].children[0].children[0].children[0].children[0].children[0])">
                                                                                                            回
                                                                                                            复
                                                                                                        </el-button>
                                                                                                    </p>
                                                                                                </div>
                                                                                            </li>

                                                                                            <div class="comment_dot"></div>
                                                                                            <ul class="replyUL"
                                                                                                v-if="item.children[0].children[0].children[0].children[0].children[0].children[0].children[0].children[0].children.length>0">
                                                                                                <li class="replyLis comment_box clearfix">
                                                                                                    <img class="member_icon_sub"
                                                                                                         :src="item.children[0].children[0].children[0].children[0].children[0].children[0].children[0].children[0].children[0].memberIcon || null">
                                                                                                    <div class="comment_box_content">
                                                                                                        <p class="content_text">
                                                                                                            <!--判断登录用户，如果=，则显示我，否则显示其他用户名-->
                                                                                                            <span class="member">{{item.children[0].children[0].children[0].children[0].children[0].children[0].children[0].children[0].children[0].memberName}}：</span>
                                                                                                            {{item.children[0].children[0].children[0].children[0].children[0].children[0].children[0].children[0].children[0].content}}
                                                                                                        </p>
                                                                                                        <p class="content_time">
                                                                                                            <span class="ce_icon ce_icon_E906"></span>
                                                                                                            {{item.children[0].children[0].children[0].children[0].children[0].children[0].children[0].children[0].children[0].updateTime}}
                                                                                                        </p>
                                                                                                    </div>
                                                                                                </li>
                                                                                                <li v-if="item.children[0].children[0].children[0].children[0].children[0].children[0].children[0].children[0].children[0].replyContent"
                                                                                                    class="replyLis comment_box clearfix">
                                                                                                    <img class="member_icon_sub"
                                                                                                         :src="item.children[0].children[0].children[0].children[0].children[0].children[0].children[0].children[0].children[0].employeeIcon">
                                                                                                    <div class="comment_box_content">
                                                                                                        <p class="content_text">
                                                                                                            <!--判断登录用户，如果=，则显示我，否则显示其他用户名-->
                                                                                                            <span class="member">{{item.children[0].children[0].children[0].children[0].children[0].children[0].children[0].children[0].children[0].employeeName}}：</span>
                                                                                                            {{item.children[0].children[0].children[0].children[0].children[0].children[0].children[0].children[0].children[0].replyContent}}
                                                                                                        </p>
                                                                                                        <p class="content_time">
                                                                                                            <span class="ce_icon ce_icon_E906"></span>
                                                                                                            {{item.children[0].children[0].children[0].children[0].children[0].children[0].children[0].children[0].children[0].updateTime}}
                                                                                                            <!--判断登录用户，如果=，则显示“删除”，否则显示：回复-->
                                                                                                            <a href="javascript:;"
                                                                                                               class="content_del"
                                                                                                               @click="delCommentSub(item.children[0].children[0].children[0].children[0].children[0].children[0].children[0].children[0].children[0])">删除</a>
                                                                                                            <el-button
                                                                                                                    v-if="item.children[0].children[0].children[0].children[0].children[0].children[0].children[0].children[0].children[0].replyContent"
                                                                                                                    class="submitBTN replay_btn"
                                                                                                                    type="primary"
                                                                                                                    @click="commentSubmit(item.children[0].children[0].children[0].children[0].children[0].children[0].children[0].children[0].children[0])">
                                                                                                                回
                                                                                                                复
                                                                                                            </el-button>
                                                                                                        </p>
                                                                                                    </div>
                                                                                                </li>

                                                                                                <div class="comment_dot"></div>
                                                                                            </ul>
                                                                                        </ul>
                                                                                    </ul>
                                                                                </ul>
                                                                            </ul>
                                                                        </ul>
                                                                    </ul>
                                                                </ul>

                                                            </ul>

                                                        </ul>
                                                    </div>
                                                </li>
                                            </ul>

                                        </div>
                                    </div>
                                </el-card>

                            </div>

                        </div>
                    </div>
                </div>
            </div>


        </div>

        <div class="leaveBox">
            <el-dialog
                    title="更换头像"
                    :visible.sync="dialogVisibleIcon"
                    :before-close="handleClose">
                <el-form :model="memberLogin" ref="memberLogin" label-width="100px" class="demo-memberLogin">

                    <el-form-item label="上传头像" prop="icon">
                        <big-file :upload-tile="'上传二维码图片'" :input-id="'upload-icon-icon'"
                                  :suffix-type="['jpg','jpeg','png','gif']"
                                  :uniId="memberLogin.uniId" :use-type="SOURCE_USE_TYPE.SOURCE_IUSE.key"
                                  :after-upload="afterIconUpload"></big-file>
                        <el-row class="upload-icon">
                            <el-col :span="14">
                                <img :src="memberLogin.icon" class="img-responsive"/>
                            </el-col>
                        </el-row>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button class="cancel" @click="dialogVisibleIcon = false">取 消</el-button>
                    <el-button class="submit" type="primary" @click="sendSaveMemberIcon(memberLogin)">确 定</el-button>
                </span>
            </el-dialog>

        </div>

        <div class="leaveBox">
            <el-dialog
                    title="绑定账号"
                    :visible.sync="dialogVisible"
                    :before-close="handleClose">
                <el-form :model="memberAccount" ref="memberAccount" :rules="emailRule" label-width="100px"
                         class="demo-member">

                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="memberAccount.email"></el-input>
                    </el-form-item>
                    <el-form-item label="微信二维码" prop="wechatCode">
                        <big-file :upload-tile="'上传二维码图片'" :input-id="'upload-wechatCode-icon'"
                                  :suffix-type="['jpg','jpeg','png','gif']"
                                  :uniId="memberAccount.uniId" :use-type="SOURCE_USE_TYPE.SOURCE_IUSE.key"
                                  :after-upload="afterWechatCodeUpload"></big-file>
                        <el-row class="upload-icon">
                            <el-col :span="14">
                                <img :src="memberAccount.wechatCode" class="img-responsive"/>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item label="身份证上传" prop="identityCard">
                        <big-file :upload-tile="'上传身份证正面图片'" :input-id="'upload-identityCard-icon'"
                                  :suffix-type="['jpg','jpeg','png','gif']"
                                  :uniId="memberAccount.uniId" :use-type="SOURCE_USE_TYPE.SOURCE_IUSE.key"
                                  :after-upload="afteridentityCardUpload"></big-file>
                        <el-row class="upload-icon">
                            <el-col :span="14">
                                <img v-if="memberAccount.identityCard" :src="memberAccount.identityCard[0]"
                                     class="img-responsive"/>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <!--<el-form-item label="留言咨询内容" prop="desc">
                        <el-input type="textarea" v-model="member.content"></el-input>
                    </el-form-item>-->
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button class="cancel" @click="dialogVisible = false">取 消</el-button>
                    <el-button class="submit" type="primary" @click="sendSaveMember('memberAccount')">确 定</el-button>
                </span>
            </el-dialog>

        </div>

        <div class="leaveBox">
            <el-dialog
                    title="编辑个人信息"
                    :visible.sync="dialogMemberVisible"
                    :before-close="handleClose">
                <el-form :model="baseInfo" ref="baseInfo" label-width="100px" class="demo-member">

                    <el-form-item label="昵称" prop="mobile">
                        <el-input v-model="baseInfo.nickName"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" prop="mobile">
                        <el-input v-model="baseInfo.name"></el-input>
                    </el-form-item>
                    <el-form-item label="所在城市" prop="add">
                        <el-cascader class="categoryInput inputOptionLine" ref="addressInput"
                                     placeholder="输入内容搜索分类"
                                     v-model="add"
                                     :options="address"
                                     :props="{value:'id',label:'areaname',children:'children'}"
                                     separator=" / "
                                     @change="addressChange">
                        </el-cascader>
                    </el-form-item>
                    <el-form-item label="个性签名" prop="desc">
                        <el-input type="textarea" v-model="baseInfo.motto"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button class="cancel" @click="dialogMemberVisible = false">取 消</el-button>
                    <el-button class="submit" type="primary" @click="sendMemberInfo('baseInfo')">确 定</el-button>
                </span>
            </el-dialog>

        </div>

        <div class="leaveBox">
            <el-dialog
                    title="回复留言"
                    :visible.sync="dialogMemberGuestBookVisible"
                    :before-close="handleClose">
                <el-form :model="memberReply" ref="memberReply" label-width="100px" class="demo-member">
                    <el-form-item label="回复内容" prop="content">
                        <el-input maxlength="500" show-word-limit type="textarea" :rows="5"
                                  v-model="memberReply.content"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button class="cancel" @click="dialogMemberGuestBookVisible = false">取 消</el-button>
                    <el-button class="submit" type="primary" @click="sendMemberGuestBook(memberReply)">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import BigFile from "../../components/BigFile";

    export default {
        name: "MemberList",
        components: {BigFile},
        data() {
            let emailValidator = (rule, value, callback) => {

                let regBlank = /\b[\w.%+-]+@[\w.-]+\.[a-zA-Z]{2,6}\b/g;
                let removeReg = /^\s*|\s{0,}$/g;

                let rmValue = value;
                if (value === '') {
                    callback(new Error('邮箱不能为空'));
                } else if (!regBlank.test(rmValue)) {
                    callback(new Error('必须由字母、数字@组成的正确邮箱格式'));
                    regBlank.test(rmValue);
                } else {
                    callback();
                    regBlank.test(rmValue);
                }

            }
            return {
                message: "进入会员中心列表页",
                iconSrc: "/base/imgs/news/icon1.jpg",
                active: 1, //绑定账号进度条
                member: {},
                memberAccount: {
                    name: "",
                    uniId: "",
                    mobile: "",
                    email: "",
                    wechatCode: "",
                    identityCard: [],
                    identityNum: ""
                },//账户关键信息，必须这里声明属性，否则无法更新数据
                dialogVisible: false,
                dialogMemberVisible: false,
                dialogVisibleIcon: false,
                dialogMemberGuestBookVisible: false,
                SOURCE_USE_TYPE: SOURCE_USE_TYPE,
                //级联选择
                address: [],
                add: [],
                //消息中心
                staticIcon: 'http://cevent-source-cloud.oss-cn-beijing.aliyuncs.com/source/source_public/2021_07_01/2021_07_01_6b0Gzo3KEKiuSo8IUWIAq_icon2.jpg',
                squareUrl: "/base/imgs/news/icon1.jpg",
                memberIcons: ["/base/imgs/news/icon1.jpg", "/base/imgs/news/icon2.jpg", "/base/imgs/news/icon1.jpg", "/base/imgs/news/icon2.jpg", "/base/imgs/news/icon1.jpg", "/base/imgs/news/icon2.jpg"],
                commentInput: "",
                memberLogin: {},
                //留言列表
                guestBooks: [],
                guestBookChildren: [],
                guestBook: {},
                memberReply: {employeeId: '', memberId: '', parentId: '', content: '', memberIcon: null},
                praiseAt: 0,
                praiseTotal: 0,
                praiseAt1: 0,
                praiseTotal1: 0,
                commentContents: 1,
                wordSize: 0,//长度判断
                //绑定总计
                bindCount: 0,
                bindTotal: 4,
                baseInfo: {uniId: '', nickName: '', name: '', province: {}, city: {}, district: {}, motto: ''},
                emailRule: {
                    email: [
                        {validator: emailValidator, trigger: 'blur'}
                    ]
                }
            }
        },
        mounted() {
            if (Tool.isNotEmpty(SessionStorage.get(ADD))) {
                this.address = SessionStorage.get(ADD)
            } else {
                this.getAddTree();
            }
            if (Tool.isNotEmpty(LocalStorage.get(MEMBER_LOGIN_LOCAL))) {
                this.memberLogin = LocalStorage.get(MEMBER_LOGIN_LOCAL) || {};
            } else {
                this.memberLogin = Tool.getLoginMember();
            }
            //放入memberAccount关键信息数据
            this.memberAccount.name = this.memberLogin.name;
            this.memberAccount.email = this.memberLogin.email;
            this.memberAccount.mobile = this.memberLogin.mobile;
            this.memberAccount.wechatCode = this.memberLogin.wechatCode;
            this.memberAccount.identityCard = this.memberLogin.identityCard;
            this.memberAccount.identityNum = this.memberLogin.identityNum;
            this.memberAccount.uniId = this.memberLogin.uniId;

            //加密会员手机号
            this.memberLogin.mobile = this.memberLogin.mobile.substring(0, 3) + "******" + this.memberLogin.mobile.substring(9, 11);
            //获取绑定数
            if (Tool.isNotEmpty(this.memberLogin.mobile)) {
                this.bindCount++;
            }
            if (Tool.isNotEmpty(this.memberLogin.wechatCode)) {
                this.bindCount++;
            }
            if (Tool.isNotEmpty(this.memberLogin.email)) {
                this.bindCount++;
            }
            if (Tool.isNotEmpty(this.memberLogin.identityNum)) {
                this.bindCount++;
            }
            if (Tool.isEmpty(this.member)) {
                this.member = this.memberLogin;
            }
            //基本信息
            this.baseInfo.nickName = this.memberLogin.nickName;
            this.baseInfo.name = this.memberLogin.name;
            this.baseInfo.province = this.memberLogin.province;
            this.baseInfo.city = this.memberLogin.city;
            this.baseInfo.district = this.memberLogin.district;
            this.baseInfo.motto = this.memberLogin.motto;
            this.baseInfo.uniId = this.memberLogin.uniId;
            this.getWidth();
            this.getAddTree();
        },
        methods: {
            getWidth() {
                let content = document.getElementById("newsComment");
                let textBox = document.getElementById("textBox");
                let submitBTN = document.getElementsByClassName("submitBTN");
                //获取leftNav的icons
                let iconArea = document.querySelectorAll(".memberCenter .leftNav .navHead .bindIcon")[0];
                let icons = document.querySelectorAll(".memberCenter .leftNav .navHead .bindIcon span");
                for (let i = 0; i < icons.length; i++) {
                    if (Tool.isNotEmpty(this.memberAccount.mobile)) {
                        Tool.addClass(icons[0], "iconActive");
                    }
                    if (Tool.isNotEmpty(this.memberAccount.email)) {
                        Tool.addClass(icons[1], "iconActive");
                    }
                    if (Tool.isNotEmpty(this.memberAccount.wechatCode)) {
                        Tool.addClass(icons[2], "iconActive");
                    }
                    if (Tool.isNotEmpty(this.memberAccount.identityCard)) {
                        Tool.addClass(icons[3], "iconActive");
                    }
                }
                $(window).on("resize", function () {
                    let wid = $(window).width();
                    if (wid > 1200) {
                        console.log("欢迎进入亚盟电商平台官网，ceevnt提供技术支持");
                    } else if (wid > 992) {
                        content.style.left = "15%";
                        /*textBox.style.marginLeft = "8.5%";
                        submitBTN.style.marginRight = "150px";*/
                        for (let i = 0; i < icons.length; i++) {
                            icons[i].style.width = "35px";
                            icons[i].style.height = "35px";
                            icons[i].style.fontSize = "16px";
                        }
                    } else if (wid < 992 && wid > 768) {
                        content.style.left = "15%";
                        /*textBox.style.marginLeft = "0";
                        submitBTN.style.marginLeft = "15px";*/
                        for (let i = 0; i < icons.length; i++) {
                            icons[i].style.width = "55px";
                            icons[i].style.height = "55px";
                            icons[i].style.fontSize = "35px";
                            icons[i].style.marginRight = "20px";
                        }
                        iconArea.style.marginLeft = "25%";
                    } else {
                        content.style.left = "1%";
                        for (let i = 0; i < icons.length; i++) {
                            icons[i].style.width = "45px";
                            icons[i].style.height = "45px";
                            icons[i].style.fontSize = "25px";
                            icons[i].style.marginRight = "20px";
                        }
                        iconArea.style.marginLeft = "5%";
                        /*textBox.style.marginLeft = "0";
                        submitBTN.style.marginLeft = "10px";*/
                    }
                }).trigger("resize");
            },
            toBindAccount() {
                this.$router.push("bindAccount");
            },
            toMemberInfo() {
                this.$router.push("memberInfo");
            },
            toMessageCenter() {
                this.$router.push("messageCenter");
            },
            //更换头像
            changeIcon() {
                this.dialogVisibleIcon = true;
            },
            /*留言对话框关闭，调用此方法，只能取消关闭*/
            handleClose(done) {

            },
            openWechatUpload() {
                this.dialogVisible = true;
            },
            sendSaveMember(memberAccount) {
                this.$refs[memberAccount].validate((valid) => {
                    if (valid) {
                        let loading = this.openLoading();
                        this.$axios.post(process.env.VUE_APP_SERVER + "/business/client/member/saveMember", this.memberAccount)
                            .then((response) => {
                                setTimeout(function () {
                                    loading.close();
                                }, 200);
                                let resp = response.data;
                                if (resp.success) {
                                    this.memberAccount = resp.responseData;
                                    this.dialogVisible = false;
                                } else {
                                    this.$message.error({
                                        showClose: true,
                                        message: resp.responseMsg,
                                        center: true,
                                    });
                                }
                            })
                    } else {
                        this.$notify({
                            title: '填写内容错误',
                            message: '请按照提示内容填写正确信息',
                            position: "top-right",
                            type: 'warning'
                        });
                        return false;
                    }
                })


            },
            afterIconUpload(resp) {
                if (resp.success) {
                    this.member.icon = resp.responseData.path;
                }
            },
            afterWechatCodeUpload(resp) {
                if (resp.success) {
                    this.memberAccount.wechatCode = resp.responseData.path;
                }
            },
            afteridentityCardUpload(resp) {
                if (resp.success) {
                    //先清空身份证图片
                    this.memberAccount.identityCard = [];
                    this.memberAccount.identityCard.push(resp.responseData.path);
                }
            },
            sendSaveMemberIcon(memberLogin) {
                let loading = this.openLoading();
                this.$axios.post(process.env.VUE_APP_SERVER + "/business/client/member/saveIcon",
                    {
                        moduleId: memberLogin.uniId,
                        picPath: memberLogin.icon
                    })
                    .then((response) => {
                        setTimeout(function () {
                            loading.close();
                        }, 200);
                        let resp = response.data;
                        if (resp.success) {
                            this.memberAccount = resp.responseData;
                            this.dialogVisibleIcon = false;
                        } else {
                            this.$message.error({
                                showClose: true,
                                message: resp.responseMsg,
                                center: true,
                            });
                        }
                    })
            },
            openMemberInfo(baseInfo) {
                this.dialogMemberVisible = true;
                //避免vue绑定漏洞，实时变换更新数据
                this.baseInfo = $.extend({}, baseInfo);
                if (Tool.isNotEmpty(baseInfo.province)) {
                    this.add.push(baseInfo.province.id);
                }
                if (Tool.isNotEmpty(baseInfo.city)) {
                    this.add.push(baseInfo.city.id);
                }
                if (Tool.isNotEmpty(baseInfo.district)) {
                    this.add.push(baseInfo.district.id);
                }
            },
            sendMemberInfo(baseInfo) {
                let loading = this.openLoading();
                this.$axios.post(process.env.VUE_APP_SERVER + "/business/client/member/saveBaseInfo", this.baseInfo)
                    .then((response) => {
                        setTimeout(function () {
                            loading.close();
                        }, 200);
                        let resp = response.data;
                        if (resp.success) {
                            this.baseInfo = resp.responseData;
                            this.dialogVisibleIcon = false;
                        } else {
                            this.$message.error({
                                showClose: true,
                                message: resp.responseMsg,
                                center: true,
                            });
                        }
                    })
                this.dialogMemberVisible = false;
            },
            //获取城市
            addressChange() {
                let checkedNodes = this.$refs.addressInput.getCheckedNodes()[0];
                let province = checkedNodes.parent.parent.label;
                let provinceId = checkedNodes.parent.parent.data.id;
                let city = checkedNodes.parent.label;
                let cityId = checkedNodes.parent.data.id;
                let district = checkedNodes.label;
                let districtId = checkedNodes.data.id;
                this.baseInfo.province = {add: province, id: provinceId};
                this.baseInfo.city = {add: city, id: cityId};
                this.baseInfo.district = {add: district, id: districtId};
            },
            getAddTree() {
                let responseMsg = "";
                this.$axios.post(process.env.VUE_APP_SERVER + '/business/client/address/tree')
                    .then((response) => {
                        let resp = response.data;
                        responseMsg = resp;
                        if (resp.success) {
                            //需要过滤tree，否则会生成第四列空数据
                            this.address = Tool.filterTree(resp.responseData);
                            SessionStorage.set(ADD, this.address);
                        } else {
                            this.$notify({
                                title: '修改失败，请联系管理员!',
                                message: responseMsg,
                                position: "top-right",
                                type: 'warning'
                            });
                        }
                    });

            },
            //消息列表
            getMessage() {
                let loading = this.openLoading();
                this.$axios.post(process.env.VUE_APP_SERVER + "/business/client/guestBook/get/" + this.baseInfo.uniId)
                    .then((response) => {
                        setTimeout(function () {
                            loading.close();
                        }, 10);
                        let resp = response.data;
                        if (resp.success) {
                            this.guestBooks = resp.responseData;
                        } else {
                            this.$message.error({
                                showClose: true,
                                message: resp.responseMsg,
                                center: true,
                            });
                        }
                    })
            },
            //获取sublist-change
            getChangeData(item) {
                let replyLis = document.getElementsByClassName("replyLis");
                if (item.children.length > 0) {
                    let lis = document.createElement('li');
                    lis.className = "comment_box clearfix";
                }
            },
            /*删除评论*/
            delComment(item) {
                let _this = this;
                toast.showConfirm(item.content, function () {
                        _this.$axios.delete(process.env.VUE_APP_SERVER + '/business/client/guestBook/delBatch/' + item.uniId)
                            .then((response) => {
                                let resp = response.data;
                                if (resp.success) {
                                    _this.getMessage();
                                }
                            });
                    }
                )
            },
            delCommentSub(item) {
                let _this = this;
                toast.showConfirm(item.content, function () {
                        _this.$axios.delete(process.env.VUE_APP_SERVER + '/business/client/guestBook/del/' + item.uniId)
                            .then((response) => {
                                let resp = response.data;
                                if (resp.success) {
                                    _this.getMessage();
                                }
                            });
                    }
                )
            },
            /*点赞*/
            addCommentPraise() {
                if (this.praiseAt === 0) {
                    this.praiseAt = 1;
                    this.praiseTotal = this.praiseTotal + this.praiseAt;
                    /*TODO 数据praiseTotal+1保存 save ,同时保存member_uniId*/
                    this.memberIcons.push("/base/imgs/news/icon3.png");
                    this.praiseTotal = this.praiseTotal - this.praiseAt;
                } else if (this.praiseAt === 1) {
                    /*TODO 数据praiseTotal-1保存 save*/
                    this.praiseAt = 0;
                    Tool.removeObj(this.memberIcons, "/base/imgs/news/icon3.png");
                    //this.memberIcons.push("/base/imgs/news/icon3.jpg");
                }
            },
            /*TODO 点击回复：点击评论/回复<a> 出现输入框，获取commentUniId*/
            commentSubmit(item) {
                this.dialogMemberGuestBookVisible = true;
                this.memberReply.memberId = item.memberId;
                this.memberReply.employeeId = item.employeeId;
                this.memberReply.parentId = item.uniId;
                this.memberReply.content = item.content || null;
            },
            /*评论*/
            sendMemberGuestBook(item) {
                let loading = this.openLoading();
                this.$axios.post(process.env.VUE_APP_SERVER + "/business/client/guestBook/save", this.memberReply)
                    .then((response) => {
                        setTimeout(function () {
                            loading.close();
                        }, 10);
                        let resp = response.data;
                        if (resp.success) {
                            this.guestBooks = resp.responseData;
                            this.dialogMemberGuestBookVisible = false;
                            this.getMessage();
                        } else {
                            this.$message.error({
                                showClose: true,
                                message: resp.responseMsg,
                                center: true,
                            });
                        }
                    })
            },

        }
    }
</script>

<style scoped>
    .memberCenter {
        margin-top: 40px;
        height: 100%;
    }

    .leftNav {
        padding-bottom: 80px;
        background: #f8fafc;
        float: left;
        border-bottom: 1px solid #ddd;
    }

    .leftNav .navHead {
        text-align: center;
    }

    .leftNav .navHead .memberIcon {
        width: 150px;
        margin-top: 50px;
        border: 5px solid #d9dde1;
        border-radius: 50%;
        display: inline-block;
        position: relative;
        overflow: hidden; /*图片变大隐藏*/
    }

    .leftNav .navHead .memberIcon:hover .mask {
        opacity: .8;
        transform: scale(1);
    }

    .leftNav .navHead .memberIcon:hover img {
        transform: rotate(30deg) scale(1.5);
    }

    .leftNav .navHead .memberIcon .mask {
        transform-origin: bottom;
        transition: all 1s;
        transform: scale(0);
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 50%;
        background-color: #e92322;
        opacity: 0;
        width: 140px;
        height: 140px;
        display: block;
    }

    .leftNav .navHead .memberIcon .mask span {
        cursor: pointer;
        position: absolute;
        display: block;
        top: 45%;
        left: 25%;
        color: #ffffff;
        font-size: 18px;
    }

    .leftNav .navHead .memberIcon img {
        transition: 1s;
        border-radius: 50%;
    }

    .leftNav .navHead .memberName {
        font-size: 20px;
    }

    .leftNav .navHead .memberId {
        margin-top: 10px;
        font-size: 15px;
        color: #777777;
    }

    .leftNav .navHead .bindIcon {
        margin-top: 15px;
        width: 100%;
        margin-left: 10px;
    }

    .leftNav .navHead .bindIcon span {
        display: inline-block;
        float: left;
        margin-right: 5px;
        font-size: 22px;
        width: 42px;
        height: 42px;
        background-color: #ffffff;
        border-radius: 50%;
        border: 1px solid #cccccc;
        position: relative;
        color: #cccccc;
    }

    .leftNav .navHead .bindIcon span::before {
        position: absolute;
        top: 9px;
        left: 9px;
    }

    .leftNav .navBody .bodyTitle {
        display: block;
        width: 100%;
        margin-top: 90px;
        text-align: center;
        font-weight: 500;
        font-size: 26px;
        line-height: 50px;
        margin-bottom: 10px;
    }

    .leftNav .navBody .titleLine {
        width: 80%;
        left: 10%;
        text-align: center;
    }

    .leftNav .navBody .bodyList {

    }

    .leftNav .navBody .bodyList ul {
        list-style: none;
        border-bottom: 0;
    }

    .leftNav .navBody .bodyList ul li {
        border: 0;
        display: list-item;
        line-height: 60px;
        text-align: center;
        position: relative;
        width: 100%;
    }

    .leftNav .navBody .bodyList ul li:hover {
        color: #e92322;
    }

    .leftNav .navBody .bodyList ul li:active, .leftNav .navBody .bodyList ul li:focus {
        background-color: #e92322;
    }

    .leftNav .navBody .bodyList ul li a {
        text-decoration: none;
        width: 100%;
        font-size: 20px;
        display: inline-block;
        cursor: pointer;
        border: 0;
        border-radius: 0;
        transition: .5s;
        line-height: 40px;
    }

    .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
        background-color: #e92322;
        color: white;
    }

    .leftNav .navBody .bodyList ul li a:active, .leftNav .navBody .bodyList ul li a:focus {
        background-color: #e92322;
        color: white;
    }

    .leftNav .navBody .bodyList ul li a:hover {
        color: #e92322;
    }

    .leftNav .navBody .bodyList ul li a:focus {
        color: white;
    }

    .rightBody .tab-content {
        margin-top: 10px;
        margin-bottom: 40px;
        margin-left: 20px;
        margin-right: 20px;
    }

    .rightBody .bindTitle {
        margin-bottom: 0;
    }

    .rightBody .cardLine {
        display: block;
        height: 1px;
        width: 100%;
        margin-top: 5px;
        margin-bottom: 15px;
    }

    .rightBody .bindTitle .title {
        font-size: 18px;
        line-height: 40px;
        font-weight: 700;
        margin-right: 10px;
    }

    .rightBody .bindTitle .titleSpan {
        font-size: 14px;
        color: #93999f;
        margin-right: 2px;
    }

    .rightBody .bindTitle .titleCount {
        color: #e92322;
        font-weight: 700;
    }

    .rightBody {
        margin-top: 20px;
    }

    .rightBody .box-card {
        margin-bottom: 20px;
    }

    .rightBody .bindCardBody {
        margin-top: 0;
        margin-bottom: 20px;
    }

    .rightBody .bindCardBody .cardItem {
        font-size: 28px;
        color: #d9dde1;
        /*color: #67C23A;*/
        display: inline-block;
        top: 5px;
        margin-right: 10px;
    }

    .rightBody .bindCardBody .cardTitle {
        color: #2b333b;
        font-size: 16px;
        font-weight: 700;
    }

    .rightBody .bindCardBody button {
        border: 1px solid #777777;
    }

    .rightBody .bindCardBody button:hover,
    .rightBody .bindCardBody button:focus {
        color: #e92322;
        background: rgba(159, 2, 1, .2);
        border: 1px solid #e92322;
    }

    .rightBody .itemBody .bodyBind {

    }

    .rightBody .itemBody .bodyName {
        color: #cccccc;
        margin: 0 10px;
    }

    .rightBody .itemBody .bodyRealName {
        color: #e92322;
        margin: 0 10px;
    }

    .rightBody .itemBody .bodyContent {
        margin-right: 5px;
    }

    .rightBody .itemBody div {
        margin-top: 10px;
    }

    .rightBody .itemBody .bodyDesc {
        color: #93999f;
        font-size: 14px;
        float: left;
        margin-right: 5px;
    }

    .rightBody .itemBody .bodyStatus {
        display: inline-block;
        color: #e92322;
        font-size: 14px;
        border-bottom: 1px solid #e92322;
    }

    .rightBody .itemBody .bodyNotice {
        display: inline-block;
        margin-bottom: 10px;
        font-weight: 700;
    }

    .rightBody .itemBody .bodyNoticeContent {
        color: #93999f;
    }

    /*弹窗*/
    .memberCenter .leaveBox .cancel {
        border: 1px solid #e92322;
    }

    .memberCenter .leaveBox .cancel:hover,
    .memberCenter .leaveBox .cancel:focus {
        color: #e92322;
        background: rgba(159, 2, 1, .2);
    }

    .memberCenter .leaveBox .submit {
        background: #e92322;
        border: none;
    }

    .memberCenter .leaveBox .submit:hover,
    .memberCenter .leaveBox .submit:focus {
        background: #fc4847;
        border: none;
    }

    /deep/ .el-dialog {
        width: 90%;
    }

    /deep/ .el-dialog__header {
        border-bottom: 1px solid #cccccc;
    }

    /*文件列表*/
    /deep/ input[type=file] {
        display: block;
        margin-left: -900px;
    }

    .upload-file-list {
        margin-bottom: 10px;
        margin-top: -40px;
        margin-left: 13%;
    }

    .upload-file-list .el-image {
        width: 150px;
        float: left;
        padding: 5px;
        border: 1px solid #cccccc;
        margin-right: 5px;
    }

    .upload-file-list .file-image .img-url {
        position: relative;
    }

    /*.upload-file-list .file-image .img-url:hover:after{
        position: absolute;
        content: "删除 X";
        width: 50px;
        height: 20px;
        bottom: 5px;
        right: 5px;
        background-color: #409EFF;
        color: white;
        !*点击*!
        pointer-events: auto;
    }*/
    .upload-file-list .file-image .img-after {
        position: relative;
        float: left;
        margin-top: 56px;
        margin-left: -37px;
        color: white;
    }

    .upload-file-list .file-image .img-after .img-del {
        padding: 5px;
        border-radius: 0;
        background-color: #e92322;
        border: 1px solid #ffffff;
    }

    .upload-file-list .file-image .img-after .img-del:hover {
        background-color: #f6504f;
    }

    /*图标列表*/
    .upload-file-icon-list {
        margin-bottom: 10px;
        margin-top: -40px;
        margin-left: 13%;
    }

    .upload-file-icon-list .el-image {
        width: 50px;
        float: left;
        padding: 5px;
        border: 1px solid #2a92ee;
        border-radius: 5px;
        margin-right: 5px;
    }

    .upload-file-icon-list .file-image .img-url {
        position: relative;
    }

    /*.upload-file-icon-list .file-image .img-url:hover:after{
        position: absolute;
        content: "删除 X";
        width: 50px;
        height: 20px;
        bottom: 5px;
        right: 5px;
        background-color: #409EFF;
        color: white;
        !*点击*!
        pointer-events: auto;
    }*/
    .upload-file-icon-list .file-image .img-after {
        position: relative;
        float: left;
        margin-top: 25px;
        margin-left: -20px;
        color: white;
    }

    .upload-file-icon-list .file-image .img-after .img-del {
        padding: 5px;
        border-radius: 15px;
        font-size: 10px;
        background-color: #e92322;
        border: 3px solid #ffffff;
        margin-right: 8px;
    }

    .upload-file-icon-list .file-image .img-after .img-del:hover {
        background-color: #f6504f;
    }

    /*删除确认框：自动换行 word-wrap:break-word*/
    /*封面上传*/
    .upload-icon {
        margin-top: -50px;
        margin-bottom: 10px;
    }

    .upload-icon img {
        width: 200px;
        padding: 5px;
        border: 1px solid #cccccc;
    }

    /*dialog对话框*/
    .mobileCode {
        max-width: 30%;
        margin-right: 10px;
    }

    /*个人信息*/

    .bindCardBody .itemBody .memberInfo {
        margin-bottom: 10px;
    }

    .bindCardBody .itemBody .memberInfo .infoName {
        font-size: 20px;
        display: inline-block;
        width: 200px;
        line-height: 40px;
        background-color: #dddddd;
        border: 1px solid #bbbbbb;
        border-radius: 15px;
        text-align: center;
        float: left;
        margin-right: 20px;
    }

    .bindCardBody .itemBody .memberInfo .infoValue {
        display: inline-block;
        line-height: 40px;
        font-size: 20px;
        border-bottom: 1px dashed #bbbbbb;
    }

    .bindCardBody .itemBody .memberInfo .infoValueMotto {
        display: inline-block;
        line-height: 40px;
        font-size: 20px;
        border-bottom: 1px dashed #bbbbbb;
    }

    .bindCardBody .itemBody .memberInfoBottomLine {
        display: inline-block;
        height: 1px;
        background: #dddddd;
        width: 80%;
        margin-left: 10%;
        margin-top: 60px;
        margin-bottom: 30px;
    }

    /*评论区*/
    /*1.主ul*/
    .newsComment {
        position: relative;
    }

    .newsComment .news_comment_ul {
        list-style: none;
        margin-top: 0;
        margin-bottom: 20px;
    }

    /*2.左侧栏*/
    .newsComment .news_comment_ul .comment_content {

    }

    .newsComment .news_comment_ul .comment_content:hover .close {
        display: block;
        width: 30px;
        background-color: #dddddd;
        padding: 5px;
        text-align: center;
    }

    .newsComment .news_comment_ul .comment_content .close {
        margin-left: 20px;
        float: right;
        display: none;
    }

    .newsComment .news_comment_ul .comment_content .content_left {
        float: left;

    }

    .newsComment .news_comment_ul .comment_content .content_left .member_icon {
        width: 50px;

    }

    /*3.1第一条评论*/
    .newsComment .news_comment_ul .comment_content .content_list {

    }

    .newsComment .news_comment_ul .comment_content .content_list .main {
        max-width: 500px;
    }

    .newsComment .news_comment_ul .comment_content .content_list .main .main_pic {
        width: 150px;
    }

    .newsComment .news_comment_ul .comment_content .content_list .main .main_text {

    }

    .newsComment .news_comment_ul .comment_content .content_list .main .main_text a {
        text-decoration: none;
        cursor: pointer;
    }

    .newsComment .news_comment_ul .comment_content .content_list .main .main_text a:hover,
    .newsComment .news_comment_ul .comment_content .content_list .main .main_text a:focus {
        color: #e92322;
    }

    /*3.2评论info*/
    .newsComment .news_comment_ul .comment_content .content_list .info {
        max-width: 500px;
        margin-top: 5px;
    }

    .newsComment .news_comment_ul .comment_content .content_list .info .praise_font {
        font-size: 15px;
    }

    .newsComment .news_comment_ul .comment_content .content_list .info .ce_icon {
        color: #a8a2a2;
        margin-right: 5px;
    }

    .newsComment .news_comment_ul .comment_content .content_list .info .info_time {
        margin-right: 5px;
        color: #a8a2a2;
    }

    .newsComment .news_comment_ul .comment_content .content_list .info .praise {
        float: right;
        text-decoration: none;
        margin-right: 10px;
    }

    .newsComment .news_comment_ul .comment_content .content_list .info .praise {
        font-size: 16px;
    }

    .newsComment .news_comment_ul .comment_content .content_list .info .praise .glyphicon {
        margin-right: 3px;

    }

    .newsComment .news_comment_ul .comment_content .content_list .praise_members {
        margin-top: 10px;
        margin-bottom: 5px;
        display: inline-block;
        width: 100%;
    }

    .newsComment .news_comment_ul .comment_content .content_list .praise_members .members_icon {
        margin-right: 5px;
        float: left;
    }

    .newsComment .news_comment_ul .comment_content .content_list .praise_total {
        max-width: 500px;
        background-color: #eee;
        border-radius: 5px;
        padding: 5px;
    }

    .newsComment .news_comment_ul .comment_content .content_list .praise_total .glyphicon {
        color: #1d7dd6;
        margin-right: 3px;
    }

    .newsComment .news_comment_ul .comment_content .content_list .praise_total .praise_total_me {
        color: #1d7dd6;
        margin-right: 5px;
    }

    .newsComment .news_comment_ul .comment_content .content_list .comment_line {
        max-width: 500px;
        margin-bottom: 10px;
        width: 100%;
        border-top: 2px solid #eee;
    }

    .newsComment .news_comment_ul .comment_content .content_list .comment_dot {
        max-width: 500px;
        margin-bottom: 5px;
        width: 100%;
        border-top: 1px dashed #eee;
    }

    /*3.3评论子模块*/
    .newsComment .news_comment_ul .comment_content .content_list .comment_list_sub {
        list-style: none;
    }

    .newsComment .news_comment_ul .comment_content .content_list .comment_list_sub .comment_box .member_icon_sub {
        width: 40px;
        float: left;
        margin-right: 10px;
        margin-bottom: 5px;
    }

    /*子评论内容*/
    .newsComment .news_comment_ul .comment_content .content_list .comment_list_sub .comment_box .comment_box_content {
        max-width: 500px;
    }

    .newsComment .news_comment_ul .comment_content .content_list .comment_list_sub .comment_box .comment_box_content .content_text .member {
        color: #1d7dd6;
    }

    .newsComment .news_comment_ul .comment_content .content_list .comment_list_sub .comment_box .comment_box_content .content_time {
        color: #777;
    }

    .newsComment .news_comment_ul .comment_content .content_list .comment_list_sub .comment_box .comment_box_content .content_time .ce_icon {
        color: #777;
        margin-right: 3px;
    }

    .newsComment .news_comment_ul .comment_content .content_list .comment_list_sub .comment_box .comment_box_content .content_time .content_prise {
        text-decoration: none;
        float: right;
        font-size: 15px;
        margin-right: 20px;
    }

    .newsComment .news_comment_ul .comment_content .content_list .comment_list_sub .comment_box .comment_box_content .content_time .content_prise .glyphicon {

    }

    .newsComment .news_comment_ul .comment_content .content_list .comment_list_sub .comment_box .comment_box_content .content_time .content_del {
        text-decoration: none;
        float: right;
        color: #e92322;
        margin-right: 10px;
    }

    /*输入评论*/
    .newsComment .text_box {
        width: 80%;
        display: inline-block;
        margin-bottom: 10px;
    }

    .newsComment .text_box .text_area {
        max-width: 400px;
    }

    /*提交评论*/

    .newsComment .replay_btn {
        float: right;
        right: 0;
        margin-right: 20px;
        margin-top: 0;
        display: inline-block;
        padding: 5px 10px;
        background-color: #e92322;
        border-color: #761313;
    }

    .newsComment .replay_btn:hover,
    .newsComment .replay_btn:focus {
        background-color: #fd4140;
    }

    /*留言图标*/
    .cardInfoItem {
        font-size: 28px;
        font-weight: 700;
        color: #e92322;
        line-height: 35px;
        margin-right: 10px;
    }

    .cardMessageItem {
        font-size: 28px;
        font-weight: 700;
        color: #e92322;
        line-height: 40px;
        margin-right: 10px;
    }

    /*图标颜色*/
    .iconActive {
        color: #ea8037 !important;
    }

    /*级联选择器*/
    /deep/ .el-cascader .el-input .el-input__inner:focus, .el-cascader .el-input.is-focus .el-input__inner {
        border-color: #e92322;
    }

    /deep/ .el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path {
        color: #e92322;
    }

    /*留言回复数据回显*/
    .replyUL {
        list-style: none;
    }
</style>